<script setup>
import { ref, reactive } from 'vue';

// 使用 reactive 创建响应式状态
const state = reactive({
  showSex: false,
  model1: {
    userInfo: {
      name: '',
      sex: '',
      phone: '',
      Addr:'',
      dateAddr:''
    },
  },

  rules: {
    'userInfo.name': {
      type: 'string',
      required: true,
      message: '请填写姓名',
      trigger: ['blur', 'change'],
    },
    'userInfo.phone': {
      type: 'number',
      required: true,
      message: '请填写手机号',
      trigger: ['blur', 'change'],
    },
    'userInfo.Addr': {
      type: 'string',
      required: true,
      message: '请填写地址',
      trigger: ['blur', 'change'],
    },
    'userInfo.dateAddr': {
      type: 'string',
      required: true,
      message: '请填写详细地址',
      trigger: ['blur', 'change'],
    },
  },
});

// 使用 ref 创建响应式引用
const form1 = ref(null);

// 定义方法
function submit() {
  form1.value.validate().then(valid => {
    if (valid) {
      uni.$u.toast('校验通过')
    } else {
      uni.$u.toast('校验失败')
    }
  }).catch(() => {
    // 处理验证错误
    uni.$u.toast('校验失败')
  });
}
</script>

<template>
<view style="padding:20rpx;box-sizing: border-box">
  <!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
  <up-form
      labelPosition="left"
      labelWidth="90"
      :model="state.model1"
      :rules="state.rules"
      ref="form1"
  >
    <up-form-item
        label="收货人"
        prop="userInfo.name"
        borderBottom="true"
        ref="item1"
    >
      <up-input
          v-model="state.model1.userInfo.name"
          border="none"
      ></up-input>
    </up-form-item>

    <up-form-item
        label="手机号"
        prop="userInfo.phone"
        borderBottom="true"
        ref="item1"
    >
      <up-input
          v-model="state.model1.userInfo.phone"
          border="none"
      ></up-input>
    </up-form-item>

    <up-form-item
        label="选择地址"
        prop="userInfo.Addr"
        borderBottom="true"
        ref="item1"
    >
      <up-input
          v-model="state.model1.userInfo.Addr"
          border="none"
      ></up-input>
    </up-form-item>

    <up-form-item
        label="详细地址"
        prop="userInfo.dateAddr"
        borderBottom="true"
        ref="item1"
    >
      <up-input
          v-model="state.model1.userInfo.dateAddr"
          border="none"
      ></up-input>
    </up-form-item>
    <up-button @click="submit">提交</up-button>

  </up-form>
</view>
</template>

<style scoped lang="scss">
.uni-form-item .title {
  padding: 20rpx 0;
}
</style>